<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>生命周期{新}</title>
</head>

<body>
<!-- 创建test -->
<div id="test"></div>
<!-- 引入核心库 -->
<script src="../newJs/react.development.js"></script>
<!-- 引入react操作DOM支持库 -->
<script src="../newJs/react-dom.development.js"></script>
<!-- 引入babel 用于将jsx转为js -->
<script src="../newJs/babel.min.js"></script>
<!-- 引入prop-types 用于对组件标签属性进行限制 -->
<script src="../newJs/prop-types.js"></script>
<script type="text/babel">  // 此处引入一定要写babel
class Count extends React.Component {
  // 构造器
  constructor(props) {
    console.log("Count-constructor")
    super(props);
    // 初始化状态
    this.state = {
      count: 0
    }
  }
  // 组件将要挂载
  // 将要弃用
  // UNSAFE_componentWillMount() {
  //   console.log("Count-componentWillMount")
  // }
  // 组件挂载完毕
  componentDidMount() {
    console.log("Count-componentDidMount")
  }

  //组件将要卸载
  componentWillUnmount() {
    console.log("Count-componentWillUnmount")
  }

  /*
  * 组件更新状态
  * 需要return true或者false
  * */
  shouldComponentUpdate() {
    console.log("Count-shouldComponentUpdate")
    return true;
  }

  /*
  组件将要更新
  * componentWillUpdate
  *
  * */
  // UNSAFE_componentWillUpdate() {
  //   console.log("Count-componentWillUpdate")
  // }

  /*
  * getDerivedStateFormProps
  * */
  static getDerivedStateFromProps (props, state) {
    console.log("Count-getDerivedStateFromProps")
    return null;
  }
  /*
  * getSnapshotBeforeUpdate
  * */
  getSnapshotBeforeUpdate () {
    console.log("Count-getSnapshotBeforeUpdate ")
    return null;
  }


  /*
  组件更新完毕
  * componentDidUpdate
  * */
  componentDidUpdate() {
    console.log("Count-componentDidUpdate")
  }

  // 创建组件
  render() {
    console.log("Count-render")
    const {count} = this.state;
    return (
      <div>
        <h2>当前求和为{count}</h2>
        <button onClick={this.addCount}>点我加一</button>
        <button onClick={this.forceUpdateMount}>强制更新</button>
        <button onClick={this.beth}>卸载组件</button>
      </div>
    )
  }


  addCount = () => {
    //  点我加一的按钮的回调
    //  获取原状态
    let {count} = this.state;
    // 更新状态
    this.setState({count: count + 1})
  }

  beth = () => {
    ReactDOM.unmountComponentAtNode(document.getElementById("test"));
  }

  forceUpdateMount = () => {
    this.forceUpdate();
  }

}
// 渲染组件
ReactDOM.render(<Count/>, document.getElementById("test"))
</script>
</body>

</html>